.popup {
	position: relative;
	z-index: 9;
	&-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
	}

	&-content {
		position: fixed;
		display: flex;
		flex-direction: column;
		background-color: #fff;

		.header {
			overflow: auto;
			flex: none;

			&.default {
				position: relative;
				height: 88px;
				line-height: 88px;
			}

			&-text {
				text-align: center;
				font-size: 32px;
				border-bottom: 1px solid #f3f3f3;
			}
			&-close {
				position: absolute;
				top: 50%;
				right: 10px;
				transform: translateY(-50%);
				font-size: 36px;
				padding: 10px;
				color: rgb(112, 112, 112);
			}
		}

		.content {
			flex: 1;
			overflow: auto;
		}

		.footer {
			flex: none;
			overflow: auto;
		}

		&.top {
			top: 0;
			left: 0;
			width: 100%;
			max-height: 100%;
			min-height: 36%;
		}
		&.right {
			top: 0;
			right: 0;
			max-width: 100%;
			min-width: 100px;
			height: 100%;
		}
		&.bottom {
			left: 0;
			bottom: 0;
			width: 100%;
			max-height: 100%;
			min-height: 100px;
		}
		&.left {
			top: 0;
			left: 0;
			max-width: 100%;
			min-width: 36%;
			height: 100%;
		}
	}
}

.slide-bottom-enter-from,
.slide-bottom-leave-to {
	transform: translateY(100%);
}

.slide-top-enter-from,
.slide-top-leave-to {
	transform: translateY(-100%);
}

.slide-left-enter-from,
.slide-left-leave-to {
	transform: translateX(-100%);
}

.slide-right-enter-from,
.slide-right-leave-to {
	transform: translateX(100%);
}

.slide-enter-active,
.slide-leave-active {
	transition: transform 0.3s cubic-bezier(0.6, 1, 0.55, 0.95);
}

.fade-enter-from,
.fade-leave-to {
	opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
	transition: opacity 0.3s cubic-bezier(0.6, 1, 0.55, 0.95);
}
